<template>
  <div class="myTable">
    <!-- <custom-form :list="list" :col="3" :gutter="10" labelPosition="left">
      <template #name="scope">
        <el-form-item
          :label="scope.column.label"
          :prop="scope.column.prop"
          :rules="scope.column.rules"
        >
          <el-input v-model="scope.data[scope.column.prop]"></el-input>
        </el-form-item>
      </template>
    </custom-form> -->
    <custom-table
      :column="column"
      :tableConfig="tableConfig"
      @row-dblclick="rowDblClick"
      @current-change="currentChange"
      @checkBox-change="checkBoxChange"
      @page-change="pageChange"
    >
      <!-- <template #date>
        <span>{{ "1231SDFSSDFFFFFFFFFFFFFFFFFFFFFFFFFFFDFFFFFFFFFFF3" }}</span>
      </template> -->
      <!-- <template #empty></template> -->
      <template #actionColumn1="scope">
        <el-button
          type="primary"
          @click="
            $router.push({
              name: 'router1',
              query: { id: 1, age: 2, name: JSON.stringify(scope.row) },
            })
          "
          >点击</el-button
        >
      </template>
    </custom-table>
    <!-- <custom-table
      :column="column"
      :tableConfig="tableConfig"
      @row-dblclick="rowDblClick"
      @current-change="currentChange"
      @checkBox-change="checkBoxChange"
      @page-change="pageChange"
    >
      <template #date>
        <span>{{ 12313 }}</span>
      </template>
      <template #empty></template>
      <template #actionColumn1="scope">
        <el-button
          type="primary"
          @click="
            $router.push({
              name: 'router1',
              query: { id: 1, age: 2, name: JSON.stringify(scope.row) },
            })
          "
          >点击</el-button
        >
      </template>
    </custom-table>
    <custom-table
      :column="column"
      :tableConfig="tableConfig"
      @row-dblclick="rowDblClick"
      @current-change="currentChange"
      @checkBox-change="checkBoxChange"
      @page-change="pageChange"
    >
      <template #date>
        <span>{{ 12313 }}</span>
      </template>
      <template #empty></template>
      <template #actionColumn1="scope">
        <el-button
          type="primary"
          @click="
            $router.push({
              name: 'router1',
              query: { id: 1, age: 2, name: JSON.stringify(scope.row) },
            })
          "
          >点击</el-button
        >
      </template>
    </custom-table> -->
    <!-- <custom-table
      :column="column"
      :tableConfig="tableConfig"
      @row-dblclick="rowDblClick"
      @current-change="currentChange"
      @checkBox-change="checkBoxChange"
      @page-change="pageChange"
    >
      <template #date>
        <span>{{ 12313 }}</span>
      </template>
      <template #empty></template>
      <template #actionColumn1>
        <el-button type="primary">点击</el-button>
      </template>
    </custom-table>
    <custom-table
      :column="column"
      :tableConfig="tableConfig"
      @row-dblclick="rowDblClick"
      @current-change="currentChange"
      @checkBox-change="checkBoxChange"
      @page-change="pageChange"
    >
      <template #date>
        <span>{{ 12313 }}</span>
      </template>
      <template #empty></template>
      <template #actionColumn1>
        <el-button type="primary">点击</el-button>
      </template>
    </custom-table> -->
  </div>
</template>

<script>
export default {
  name: "router",
  data() {
    return {
      form: {},
      column: [
        {
          prop: "name",
          label: "姓名",
          width: "100",
        },
        {
          prop: "address",
          label: "地址",
          width: "100",
          children: [
            {
              prop: "address24",
              label: "xxx",
              width: "200",
              // children: [
              //   {
              //     prop: "address244",
              //     label: "x123xx",
              //     width: "200",
              //   },
              //   {
              //     prop: "addresswer22324",
              //     label: "xxx234werwe",
              //     width: "200",
              //   },
              // ],
            },
            {
              prop: "addresswer24",
              label: "xxxwerwe",
              width: "200",
            },
          ],
        },
        {
          prop: "date",
          width: "200",
          label: "日期",
        },

        {
          prop: "name4",
          label: "年龄",
          width: "600",
        },
        {
          prop: "name1",
          label: "身高",
          width: "200",
        },

        {
          prop: "name2",
          label: "体sdfsdf重",
          width: "100",
        },
      ],
      tableConfig: {
        total: 20,
        operation: [],
        useIndex: true,
        indent: 10,
        useMultiSelect: true,
        treeProps: { children: "children" },
        pageSize: 10,
        layout: "total,prev,pager,next,sizes,jumper",
        showPagination: true,
        data: [
          { name: "潘嘉xxsssssssdfsdfsfsxxxx伟", date: "1999-10-26", id: 1 },
          { name: "潘嘉伟", date: "1999-10-26", id: 5 },
          {
            name: "潘嘉伟",
            date: "1999-10-26",
            id: 6,
            name2:
              "士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫就离开家了就了",
          },
          {
            name: "潘嘉sdffffffffffsdfsdfsdf122234drewrfffffffffffffffffffffffffff伟",
            date: "1999-10-26",
            id: 7,
          },
          { name: "潘嘉伟", date: "1999-10-26", id: 8 },
          {
            name: "1231SDFSSDFFFFFFFFFFFFFFFFFFFFFFFFFFFDFFFFFFFFFFF3",
            date: "1999-10-26",
            id: 9,
          },
          { name: "潘嘉伟", date: "1999-10-26", id: 10 },
          { name: "潘嘉伟", date: "1999-10-26", id: 11 },
          { name: "潘嘉伟", date: "1999-10-26", id: 12 },
          { name: "潘嘉伟", date: "1999-10-26", id: 13 },
          // { name: "潘嘉伟", date: "1999-10-26", id: 14 },
          // { name: "潘嘉伟", date: "1999-10-26", id: 15 },
          // { name: "潘嘉伟", date: "1999-10-26", id: 16 },
          // { name: "潘嘉伟", date: "1999-10-26", id: 17 },
          // { name: "潘嘉伟", date: "1999-10-26", id: 18 },
          // { name: "潘嘉伟", date: "1999-10-26", id: 19 },
        ],

        actionColumns: [
          {
            label: "操作",
            slotName: "actionColumn1",
            width: 120,
          },
        ],
      },
      list: [
        {
          label: "姓名",
          prop: "name",
          type: "input",
          rules: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        },
        { label: "年龄", prop: "age", type: "textarea" },
        {
          label: "日期",
          prop: "date",
          type: "date",
          rules: [{ required: true, message: "请选择日期", trigger: "change" }],
        },
        {
          label: "单选",
          prop: "radio",
          type: "radio",
          radioList: [
            { key: "1", value: "是" },
            { key: "0", value: "否" },
          ],
          rules: [{ required: true, message: "请输入姓名", trigger: "change" }],
        },
        {
          label: "下拉选择",
          prop: "select",
          type: "select",
          optionList: [
            { value: "1", label: "是" },
            { value: "0", label: "否" },
          ],
          rules: [{ required: true, message: "请选择xxx", trigger: "change" }],
        },
      ],
    };
  },
  methods: {
    rowDblClick(row, column, event) {
      console.log(row, column, event);
    },
    checkBoxChange(selection, row) {
      console.log(selection, row);
    },
    currentChange(current) {
      this.tableConfig.data = [
        {
          name: "1231SDFSSDFFFFFFFFFFFsdfs撒旦发射点发射点FFFFFFFFFFFFFFFFDFFFFFFFFFFF3",
          date: "1999-10-26",
          id: 19,
        },
      ];
    },
    pageChange(pageSize) {
      console.log(pageSize);
    },
  },
  mounted() {},
};
</script>

<style>
.myTable {
  user-select: none;
  user-zoom: 0;
  -webkit-user-drag: none;
}
</style>
